<template>

   <section>
      <el-col :span="24" style="padding-left:16px;padding-top:10px;padding-bottom:10px;">
            <el-button round type="primary"
              size="small" icon="el-icon-plus" @click="addRootClassify()">创建分类</el-button> 
        </el-col>    
        
     <div style="padding:14px;">
       
       <el-card>
        <h2 style="margin-bottom:10px;">分类树</h2>
        
        <el-row :gutter="20">
          <el-col :span="17">
 <el-tree
          :data="dataTree"
          node-key="id"
          :props="defaultProps"
           v-loading="listLoading" 
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            {{ node.label }}
            <span>
              
               <el-dropdown @command="handleCommand" trigger="click" @visible-change="visibleChange(node, data)">
                   <el-button type="text" >新增</el-button> 
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="'menuOption'+index" v-for="(item,index) in itemAddMenu">
                          {{item.lable}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
              <el-button
                v-loading="optionLoading"
                type="text"
                @click="() => delConfirm(node, data)">
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
          </el-col>
           <el-col :span="7">
          <el-collapse v-model="activeNames">
              <el-collapse-item style="padding-left:10px;" name="1">
                  <template slot="title">
                  提示：&nbsp;<i class="header-icon el-icon-info"></i>
                  </template>
                  <div>创建分类时尽量按照类型分类；如：</div>
                  <div>电子产品>戴尔电脑，电子产品>苹果电脑</div>
                  <div>这在后期统计时将给您带来方便</div>
              </el-collapse-item>
              </el-collapse>
          </el-col>
        </el-row>
       
       </el-card>
      
      </div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px">
           
            <el-form :model="addForm" :rules="rules" ref="addGroupForm" size="small" label-width="80px"> 
                    <el-form-item label="名称" prop="groupName">
                        <el-input clearable v-model="addForm.groupName"></el-input>
                    </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('addGroupForm')" :loading="loading">确 定</el-button>
            </div>
        </el-dialog>    
   </section>
</template>

<script>
//引用数据操作API
import store from "@/store";
//引用vuex的导入语法糖功能
import { createNamespacedHelpers } from "vuex";
const { mapGetters, mapActions } = createNamespacedHelpers("system/role");

import api from "@/service/api";
import http from "@/service/http";

let id = 1000;
let flag = false;
let targetNode; //当前要操作的node
export default {
  data() {
    return {
      activeNames: ['1'],
      dialogTitle: "",
      dataTree: [],
      itemAddMenu: [],
      listLoading: false,
      optionLoading: false,
      loading: false,
      dialogFormVisible: false,
      addForm: {
        groupName: ""
      },
      addGroup:{name:'',pId:''},
      defaultProps: {
        children: "child",
        label: "name"
      },
      rules: {
        groupName: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  //计算属性
  computed: {
    //导入store的getters属性
    //...mapGetters(['tableData','currentPage','listLoading','totalNum','pageSize']),
  },
  methods: {
    //导入actions方法
    //...mapActions(['getRoles','handleSelectionChange','handleSizeChange','handleCurrentChange']),

    getGroupTree() {
      this.listLoading = true;
      var search = { pageNum: this.currentPage, pageSize: this.pageSize };
      http.post(api.sysApi.classifyList, "").then(data => {
        if(!data.success){
				return;
			}
        this.dataTree = data.data;
        this.listLoading = false;
      });
    },
    visibleChange(node, data) {
      targetNode = node;
      if (flag) {
      } else {
        //更具node生成菜单
        this.itemAddMenu = []; //置空
        const menu1 = { optionType: 1, type: 1, lable: "同级分类" };
          const menu2 = { optionType: 2, type: 1, lable: "下级分类" }; 
          this.itemAddMenu.push(menu1);
          this.itemAddMenu.push(menu2);
      }
      flag = !flag;
    },
    handleCommand(command) {
      this.addGroup = {};
      //  targetNode
      if (command === "menuOption0") {
            this.dialogTitle = "添加同级分类"; 
            this.addGroup.pId = targetNode.data.pid;
        }else if (command === "menuOption1") {
            this.dialogTitle = "添加下级分类"; 
            this.addGroup.pId = targetNode.data.id;
        }
      this.dialogFormVisible = true;
    },
    delConfirm(node, data) {
      this.$confirm("此操作将删除 [ " + data.name + " ], 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (data.child && data.child.length != 0) {
            this.$message({
              type: "error",
              message: data.name + " 存在下级,不可删除。"
            });
          } else {
            this.removeGroup(data);
          }
        })
        .catch(() => {
           this.$message({
          type: "success",
          message: "是滴是滴所多"
        });
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addGroup.name = this.addForm.groupName;
          this.addOneGroup(this.addGroup);
        } else {
          return false;
        }
      });
    },
    addRootClassify(){
      this.dialogFormVisible = true;
      this.dialogTitle = "添加分类";
      this.addGroup.pId = 0;
    },
    addOneGroup(data) {
      this.listLoading = true;
      http.post(api.sysApi.addClassify, data).then(data => {
        if(!data.success){
				return;
			}
        this.listLoading = false;
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: "添加成功"
        });
        this.getGroupTree();
      });
    },
    removeGroup(data) { 
      http.post(api.sysApi.delClassify, data).then(data => {
        if(!data.success){
				return;
			} 
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.getGroupTree();
      });
    }
  },
  mounted() {
    this.getGroupTree();
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  height: 36px;
}
</style>
